<template>
  <q-page :padding="!$q.platform.is.mobile">
    <q-inner-loading visible v-if="latest.length == 0">
      <q-spinner-gears size="50px" color="primary"></q-spinner-gears>
      <b class="text-primary">数据加载中...</b>
    </q-inner-loading>

    <q-list separator class="q-pa-none" :no-border="$q.platform.is.mobile" v-if="tops.length > 0">
      <q-list-header>置顶影片</q-list-header>
      <q-item v-for="item in tops" :key="'top'+item.id" :to="'/movie/' + item.id">
        <q-item-main>
          <q-item-tile label>{{ item.name }} ({{item.releaseDate}})</q-item-tile>
          <q-item-tile sublabel v-if="item.score>0">
            评分:<b class="text-primary">{{item.score/10}}</b>, 评价人数:{{item.ratingCount}}
          </q-item-tile>
          <q-item-tile sublabel v-if="item.score<=0">想看人数:{{item.wishCount}}</q-item-tile>
        </q-item-main>
        <q-item-side right icon="mdi-chevron-right" />
      </q-item>
    </q-list>

    <q-list separator class="q-mt-md q-pa-none" :no-border="$q.platform.is.mobile" v-if="latest.length > 0">
      <q-list-header>近期热映</q-list-header>
      <q-item v-for="item in latest" :key="'latest'+item.id" :to="'/movie/' + item.id">
        <q-item-main>
          <q-item-tile label>{{ item.name }} ({{item.releaseDate}})</q-item-tile>
          <q-item-tile sublabel v-if="item.score>0">
            评分:<b class="text-primary">{{item.score/10}}</b>, 评价人数:{{item.ratingCount}}
          </q-item-tile>
          <q-item-tile sublabel v-if="item.score<=0">想看人数:{{item.wishCount}}</q-item-tile>
        </q-item-main>
        <q-item-side right icon="mdi-chevron-right" />
      </q-item>
    </q-list>

    <!-- create new -->
    <q-btn round color="primary" class="fixed" icon="add" size="lg"
      style="right: 15px; bottom: 15px" @click="modal = true"/>

    <!-- modal -->
    <q-modal v-model="modal" :position="$q.platform.is.mobile?'':'right'" :maximized="$q.platform.is.mobile">
      <q-toolbar color="primary">
        <q-toolbar-title>影片搜索</q-toolbar-title>
        <q-btn flat round dense icon="mdi-close" @click="modal=false" />
      </q-toolbar>
      <q-search icon="search" class="full-width" :value="query" color="primary" 
                placeholder="搜索影片" autofocus="true" @change="searchMovie" />
      <q-list separator no-border v-if="query">
        <q-list-header>搜索结果： <b class="text-primary">{{list.length}}</b></q-list-header>
        <q-item-separator />
        <q-item v-for="item in list" :key="item.id" :to="'/movie/'+item.id+'?setting=true'">
          <q-item-main>
            <q-item-tile label>{{ item.name }} ({{item.releaseDate}})</q-item-tile>
            <q-item-tile sublabel v-if="item.score>0">评分:{{item.score/10}}, 评价人数:{{item.ratingCount}}</q-item-tile>
            <q-item-tile sublabel v-if="item.score<=0">想看人数:{{item.wishCount}}</q-item-tile>
          </q-item-main>
          <q-item-side right icon="mdi-chevron-right" />
        </q-item>
      </q-list>
    </q-modal>
  </q-page>
</template>

<script>
export default {
  name: 'PageIndexMovie',
  data() {
    return {
      modal: false,
      tops: [],
      latest: [],
      query: '',
      list: []
    }
  },
  mounted() {
    this.$api.ui.pageTitle = '豆瓣近期热映';
    this.loadMovies();
  },
  methods: {
    loadMovies() {
      let me = this;
      this.$api.movie.loadInterests(res=>{
        let data = res.data.model;
        me.tops = data.tops;
        me.latest = data.latest;
      });
    },
    searchMovie(val) {
      this.query = val;
      this.list = [];
      if(this.query) {
        let me = this;
        this.$api.movie.searchMovie(val, res=>{
          me.list = res.data.model;
        });
      }
    }  
  }
}
</script>